<template>
    <ak-page-code>components</ak-page-code>
    <ak-title>AKjs前端框架</ak-title>
    <ak-main>
        <nav class="scrollbarfixed bg_white wp_94 bor_bottom bor_gray_ddd">
            <ol class="line_h_3rem">
                <li class="dis_inbl c_gray_777"><i class="icon-mn_weizhi"></i> 当前位置：</li>
                <li class="dis_inbl c_gray_777">首页 &gt; </li>
                <li class="dis_inbl c_gray_777">组件 &gt; </li>
                <li class="dis_inbl c_theme font_bold">ChangeIcon</li>
            </ol>
        </nav>
        <div class="module mt_2 ml_1">
            <section class="fl ml_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">使用方法</h3>
                </fieldset>
                <article class="pos_rel ovh h_35_rem bg_white">
                    <div class="plug_tabs_code wm_96">
                        <nav class="ovh press bg_white">
                            <ul class="ovh list_h_3rem nav_line_c length3">
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">HTML</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">插件调用</li>
                                <li class="fl pos_rel text_al_c bor_bottom bor_gray_ddd cur_pointer touchstart">按需引入</li>
                            </ul>
                        </nav>
                        <article class="pos_rel ovh mt_2">
                            <div class="pos_rel ovh bg_white h_24_rem">
                                <section class="pos_rel ovh h_in">
                                    <!--HTML-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
     <div class="plug_filter module press bg_white wp_94 h_32rem bor_bottom bor_gray_ddd">
      <ul class="length4 list_h_32rem h_in">
        <li class="fl text_al_c cur_pointer touchstart plug_sort_btn1">
          <strong class="vert_al_t c_gray_777">智能排序</strong>
        </li>
        <li class="fl text_al_c cur_pointer touchstart plug_sort_btn2">
          <strong class="vert_al_t c_gray_777">销量</strong>
          <button type="button" class="line_h_in vert_al_s text_al_c c_gray_777">
            <i class="pos_abs minus_mt_05rem icon-px_zhengxu"></i>
            <i class="icon-px_daoxu"></i>
          </button>
        </li>
        <li class="fl text_al_c cur_pointer touchstart plug_sort_btn3">
          <strong class="vert_al_t c_gray_777">价格</strong>
          <button type="button" class="line_h_in vert_al_s text_al_c c_gray_777">
            <i class="pos_abs minus_mt_05rem icon-px_zhengxu"></i>
            <i class="icon-px_daoxu"></i>
          </button>
        </li>
        <li class="fl text_al_c cur_pointer touchstart plug_sort_btn4">
          <strong class="vert_al_t c_gray_777">筛选</strong>
          <button type="button" class="line_h_in vert_al_m text_al_c c_gray_777">
            <i class="icon-ln_xiangxia fs_12rem"></i>
          </button>
        </li>
      </ul>
    </div>
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--插件调用-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
     $(function(){
        $(".plug_sort_btn1").AKjs_ChangeIcon({
            multi_icon: false, //是否控制的图标是多个
            text_color: new Array( //文字颜色设置（最多两个）
                "c_gray_777", //默认颜色
                "c_theme" //点击后的颜色
            ),
            clickBack:function(state,op){ //回调获取当前的值和option参数
                var text_color1 = $(this)[0].text_color[0]; //默认颜色
                var text_color2 = $(this)[0].text_color[1]; //点击后的颜色
                if (state == true) { //是否被开启
                    $(".plug_sort_btn2").children().removeClass(text_color2).addClass(text_color1); //清理第2个的文字样式
                    $(".plug_sort_btn2").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第2个的图标样式
                    $(".plug_sort_btn3").children().removeClass(text_color2).addClass(text_color1); //清理第3个的文字样式
                    $(".plug_sort_btn3").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第3个的图标样式
                    $(".plug_sort_btn4").children().removeClass(text_color2).addClass(text_color1); //清理第4个的文字样式
                    $(".plug_sort_btn4").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第4个的图标样式
                }
            }
        });
    });
    $(function(){
        $(".plug_sort_btn2").AKjs_ChangeIcon({
            multi_icon: true, //是否控制的图标是多个
            text_color: new Array( //文字颜色设置（最多两个）
                "c_gray_777", //默认颜色
                "c_theme" //点击后的颜色
            ),
            clickBack:function(state,op){ //回调获取当前的值和option参数
                var text_color1 = $(this)[0].text_color[0]; //默认颜色
                var text_color2 = $(this)[0].text_color[1]; //点击后的颜色
                if (state) { //是否被开启
                    $(".plug_sort_btn1").children().removeClass(text_color2).addClass(text_color1); //清理第1个的文字样式
                    $(".plug_sort_btn3").children().removeClass(text_color2).addClass(text_color1); //清理第3个的文字样式
                    $(".plug_sort_btn3").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第3个的图标样式
                    $(".plug_sort_btn4").children().removeClass(text_color2).addClass(text_color1); //清理第4个的文字样式
                    $(".plug_sort_btn4").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第4个的图标样式
                }
            }
        });
    });
    $(function(){
        $(".plug_sort_btn3").AKjs_ChangeIcon({
            multi_icon: true, //是否控制的图标是多个
            text_color: new Array( //文字颜色设置（最多两个）
                "c_gray_777", //默认颜色
                "c_theme" //点击后的颜色
            ),
            clickBack:function(state,op){ //回调获取当前的值和option参数
                var text_color1 = $(this)[0].text_color[0]; //默认颜色
                var text_color2 = $(this)[0].text_color[1]; //点击后的颜色
                if (state) { //是否被开启
                    $(".plug_sort_btn1").children().removeClass(text_color2).addClass(text_color1); //清理第1个的文字样式
                    $(".plug_sort_btn2").children().removeClass(text_color2).addClass(text_color1); //清理第3个的文字样式
                    $(".plug_sort_btn2").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第3个的图标样式
                    $(".plug_sort_btn4").children().removeClass(text_color2).addClass(text_color1); //清理第4个的文字样式
                    $(".plug_sort_btn4").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第4个的图标样式
                }
            }
        });
    });
    $(function(){
        $(".plug_sort_btn4").AKjs_ChangeIcon({
            multi_icon: false, //是否控制的图标是多个
            text_color: new Array( //文字颜色设置（最多两个）
                "c_gray_777", //默认颜色
                "c_theme" //点击后的颜色
            ),
            Change_icon: new Array( //文字颜色设置（最多两个）
                "icon-ln_xiangxia", //默认显示图标
                "icon-ln_xiangshang" //切换后显示的图标
            ),
            clickBack:function(state,op){ //回调获取当前的值和option参数
                console.log(op);
                var text_color1 = $(this)[0].text_color[0]; //默认颜色
                var text_color2 = $(this)[0].text_color[1]; //点击后的颜色
                if (state == true) { //是否被开启
                    $(".plug_sort_btn1").children().removeClass(text_color2).addClass(text_color1); //清理第1个的文字样式
                    $(".plug_sort_btn2").children().removeClass(text_color2).addClass(text_color1); //清理第3个的文字样式
                    $(".plug_sort_btn2").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第3个的图标样式
                    $(".plug_sort_btn3").children().removeClass(text_color2).addClass(text_color1); //清理第3个的文字样式
                    $(".plug_sort_btn3").children().find("i").removeClass(text_color2).addClass(text_color1); //清理第3个的图标样式
                }
            }
        });
    });
</textarea>
                                </section>
                                <section class="pos_rel ovh h_in">
                                    <!--按需引入-->
                                    <textarea class="text_al_l line_h_18rem w_100 bg_gray_555 c_white">
    AKjs_Plugin("AKjs_ChangeIcon"); //图标切换功能
</textarea>
                                </section>
                            </div>
                        </article>
                    </div>
                    <fieldset class="wm_96 mt_2 mb_2">
                        <button type="button" class="plug_submit btn_h_au w_100 bg_theme c_white h_32rem">运行测试</button>
                    </fieldset>
                </article>
            </section>
            <section class="fr mr_2 w_47 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">效果展示</h3>
                </fieldset>
                <article class="pos_rel ova h_35_rem bg_white05">
                    <div class="plug_preview pos_rel ovh pa_2"></div>
                </article>
            </section>
        </div>
        <div class="module mt_2 ml_1">
            <section class="fl wm_96 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">功能插件基本信息</h3>
                </fieldset>
                <article class="pos_rel ovh wp_96 pt_2 pb_2 bg_white">
                    <table class="border bor_gray_ddd">
                        <thead class="c_theme text_al_c list_h_3rem bor_top2 bor_theme">
                        <tr class="bor_bottom bor_gray_ddd line_h_100">
                            <th class="font_bold bor_right bor_gray_ddd">插件名称</th>
                            <th class="font_bold bor_right bor_gray_ddd">说明</th>
                            <th class="font_bold bor_right bor_gray_ddd">依赖的插件名</th>
                            <th class="font_bold bor_right bor_gray_ddd">按需引入方法</th>
                        </tr>
                        </thead>
                        <tbody class="c_gray_777 text_al_c list_h_24rem list_f9f_white bor_top bor_gray_ddd">
                        <tr class="bor_bottom bor_gray_ddd">
                            <td class="bor_right bor_gray_ddd font_bold">AKjs_ChangeIcon</td>
                            <td class="bor_right bor_gray_ddd">图标切换功能插件</td>
                            <td class="bor_right bor_gray_ddd">无</td>
                            <td class="bor_right bor_gray_ddd">
                                <p class="text_al_l text_ind_2rem">AKjs_Plugin("AKjs_ChangeIcon"); //图标切换功能</p>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </article>
            </section>
        </div>
        <div class="module mt_2 ml_1">
            <section class="fl wm_96 ovh pos_rel">
                <fieldset class="pos_rel ovh bg_gray_ccc">
                    <h3 class="fs_14rem c_black line_h_24rem text_al_c">功能插件参数说明</h3>
                </fieldset>
                <article class="pos_rel ovh wp_96 pt_2 pb_2 bg_white">
                    <table class="border bor_gray_ddd">
                        <thead class="c_theme text_al_c list_h_3rem bor_top2 bor_theme">
                        <tr class="bor_bottom bor_gray_ddd line_h_100">
                            <th class="font_bold bor_right bor_gray_ddd">参数</th>
                            <th class="font_bold bor_right bor_gray_ddd">说明</th>
                            <th class="font_bold bor_right bor_gray_ddd">类型</th>
                            <th class="font_bold bor_right bor_gray_ddd">可选值</th>
                            <th class="font_bold bor_right bor_gray_ddd">默认值</th>
                        </tr>
                        </thead>
                        <tbody class="c_gray_777 text_al_c list_h_24rem list_f9f_white bor_top bor_gray_ddd">
                        <tr class="bor_bottom bor_gray_ddd">
                            <td class="bor_right bor_gray_ddd">multi_icon</td>
                            <td class="bor_right bor_gray_ddd">是否控制的图标是多个</td>
                            <td class="bor_right bor_gray_ddd">boolean</td>
                            <td class="bor_right bor_gray_ddd">true, false</td>
                            <td class="bor_right bor_gray_ddd">false</td>
                        </tr>
                        <tr class="bor_bottom bor_gray_ddd">
                            <th class="bor_right bor_gray_ddd">text_color</th>
                            <td class="bor_right bor_gray_ddd">文字颜色设置（最多两个）</td>
                            <td class="bor_right bor_gray_ddd">object</td>
                            <td class="bor_right bor_gray_ddd">---</td>
                            <td class="bor_right bor_gray_ddd">
                                new Array("默认颜色", "点击后的颜色")
                            </td>
                        </tr>
                        <tr class="bor_bottom bor_gray_ddd">
                            <th class="bor_right bor_gray_ddd">clickBack</th>
                            <td class="bor_right bor_gray_ddd">回调获取当前的值和option参数</td>
                            <td class="bor_right bor_gray_ddd">function</td>
                            <td class="bor_right bor_gray_ddd">state, op</td>
                            <td class="bor_right bor_gray_ddd">---</td>
                        </tr>
                        </tbody>
                    </table>
                </article>
            </section>
        </div>
    </ak-main>
    <ak-plugin></ak-plugin>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
//注：template，ak-page-code，ak-title，ak-plugin，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-page-code></ak-page-code>
    <ak-title></ak-title>
    <div></div>
    <ak-plugin></ak-plugin>
</template>
<script>
</script>
<style>
</style>
-->

